<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>评论列表</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/aui.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/dropload.css" />
		<script src="js/art-template.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/aui-pull-refresh.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script>-->
		<style>
			body {
				cursor: pointer;
			}
			
			#tabs div:after {
				content: "";
				position: absolute;
				display: block;
				width: 0;
				height: .25rem;
				background-color: #282828;
				bottom: 0;
				left: 50%;
				transition: all .4s;
				transform: translate(-50%, 0);
			}
			
			#tabs div.active:after {
				width: 2.5rem;
			}
			
			em.down img {
				transform: rotateZ(180deg);
			}
			
			.item {
				justify-content: space-between;
				padding: 1.1rem 0;
				border-bottom: 1px #e5e5e5 solid;
				display: flex;
			}
			
			.item b {
				margin-bottom: 0.833333rem;
				display: block;
				line-height: 1.833333rem;
				font-size: 1.5rem;
			}
			
			.item em {
				display: block;
				width: 3.666666rem;
				height: 1.833333rem;
				border: 1px solid #666;
				border-radius: 0.549999rem;
				text-align: center;
				line-height: 1.833333rem;
				font-size: 1.166666rem;
			}
			
			#wpr {
				color: #666;
				font-size: 1.25rem;
				line-height: 1.5rem;
			}
			
			#wpr .item:nth-last-child(1) {
				border: none;
			}
			
			.back-c {
				background-position: center center;
				background-size: contain;
				background-repeat: no-repeat;
			}
			
			.p-r {
				position: relative;
				line-height: 33px;
			}
			
			.left span {
				float: left;
				width: 3.33rem;
				height: 3.33rem;
				display: inline;
				margin-right: .83rem;
				border-radius: 50%;
				background-position: center center;
				background-size: contain;
				background-repeat: no-repeat;
			}
			
			.buy {
				float: right;
				width: 7.083333rem;
				line-height: 2.5rem;
				background: -webkit-gradient(linear, center top, center bottom, from(#F7BA64), to(#ED8434));
				border-radius: 8.333333rem;
				font-size: 1.083333rem;
				color: #fff;
				text-align: center;
				box-shadow: 0 0.166666rem 0.416666rem 0 #F8CAA7;
			}
			
			#commentInput {
				width: 84%;
				float: left;
				line-height: 20px;
				padding: 0 5px;
				font-size: 16px;
				border: 1px solid #ccc8c3;
				border-radius: 5px;
				background: #fff;
				max-height: 97px;
				overflow-y: auto;
				outline: none;
				margin: 0 4px;
			}
			
			.comment-mask {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, .3);
				z-index: 100;
				display: none;
			}
			
			.comment-container {
				position: fixed;
				bottom: 0;
				width: 100%;
				left: 0;
				background: #fff;
				border-radius: 10px 10px 0 0;
				z-index: 101;
				padding: 10px;
				transform: translateY(200px);
				-webkit-transform: translateY(200px);
				transition: all 0.3s ease;
				-webkit-transition: all 0.3s ease;
			}
			/*.clearfix :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}*/
		</style>
	</head>

	<body>
		<div class="scrollload-containernew" style="position: relative;top:40px;">
			<div id="content" class="scrollload-contentnew">

			</div>
		</div>
		<div id="warn" style="background: rgba(0, 0, 0, 0.7);text-align: center;border-radius: 0.25rem;color: #ffffff;position: fixed;z-index: 3;top: 45%;left: 50%;width: 8em;margin-left: -4em;height: 3rem;line-height: 3rem;display: none;">请先登录！</div>

		<div id="j-bottom" class="bottom-container" style="position: fixed;width: 100%;bottom: 0px;">
			<div class="input-base clearfix robot-show" style="display: block;height: 100%;padding:5px;background-color: #f3f3f3;position: relative;border-bottom: 1px solid #bbb;">
				<input type="text" id="commentInput" class="bottom-chat-edit j-click j-input" style="height:40px;" placeholder="说点什么吧..." />

				<div id="j-bottom-icons-robot" class="right-bottom-icons" style="width: 12%;height: 40px;top: 50%;right: 0px;text-align: center;float: left;">
					<div class="bottom-send-icon j-click submit-text" style="height: 100%;float: left;width: 100%;line-height: 40px;">
						<span style=" line-height: 40px;color: #5bae6b;font-size: 14px;">发送</span>
					</div>
				</div>
			</div>
		</div>
		<div class="comment-mask">

		</div>
		<!--<div class="comment-container">
			<textarea name="" rows="5" style="height: auto;" placeholder="说点什么吧..."></textarea>
			<div style="text-align: right;">
				<span class="close-modal" style="color: #999;padding: 10px;">取消</span>
				<span class="submit-text" style="color: #61b272;padding: 10px;">发布</span>
			</div>
		</div>-->
	</body>

</html>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
<script src="js/timeago.js" type="text/javascript" charset="utf-8"></script>
<script src="js/aui-toast.js" type="text/javascript" charset="utf-8"></script>
<script src="js/dropload.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	document.writeln("<script type=\"text/javascript\" src=\"js/common.js?"+ Math.random() + "\"></scr"+"ipt>");
</script>
<script id="command_tem" type="text/html">
	{{if !data.list}}
	<div class="col-xs-12 empty" style="padding: 25% 0;margin-top:5.3rem;display: block;">
		<div align="center" class="col-xs-12" style="padding:0;margin: 2% 0;">
			<a href="javascript:;" style="display:block;height: 20%;width: 30%">
				<img src="icon/sp.png" style="width: 100%;display: inline-block;margin: 0;border: 0;vertical-align: middle;">
			</a>
		</div>
		<div align="center" class="col-xs-12" style="padding-top: 2rem;">
			<p style="font-size: 1.6rem;font-weight:400;color: #c3c3c3;">与世界分享你的智慧</p>
		</div>
		<!--<div align="center" class="col-xs-12" style="padding:0">
        	  	<div align="center" style="width: 32%;height:7%;padding:2%;border: 1px solid #679c34;border-radius:4% 4% 4% 4%/8% 8% 8% 8%;vertical-align: middle;">
             	 	<span style="font-size: 1.5rem; color:#679c34;font-family: bolder;vertical-align: middle">去选书</span>
         	 	</div>
      		</div>-->
	</div>
	{{else if data.list}} {{each data.list}}
	<div style="width: 100%;padding: 1rem 1rem;overflow: hidden;padding-bottom: 0;" class="border-b">
		<div class="clearfix">
			<img src="{{$value.headimg | addFaceUrl}}" style="width: 3.3333rem;height: 3.3333rem;border-radius: 100%;float:left;margin-right: 1rem;" />
			<div style="float: left;">
				<div style="color: #56ad66;">{{$value.nickname}}</div>
				<div>{{timeFormat($value.gmtCreated) }}</div>
			</div>
			<div class="col-xs-2 praise-parent" style="padding-right:0;padding-left: 0;float: right;">
				{{if $value.islike}}
				    <img class="praise" data-isfavor="true" src="icon/button_praise_pressed.png30.png" alt="" style="vertical-align:middle;display:inline-block;float:left;width: 1.67rem;height: 1.67rem;border-radius: 100%;margin-left: 0.5rem;">
					{{else}}
					<img class="praise" data-isfavor="false" src="icon/dianzan@2x.png" timeDot="{{$value.id}}" style="vertical-align:middle;display:inline-block;float:left;width: 1.67rem;height: 1.67rem;border-radius: 100%;margin-left: 0.5rem;">
					{{/if}}
					<p class="count" style="float:left;line-height:1.77rem;margin-left:0.33rem;font-size:13px;color:#666666;">{{$value.likeCount||0}}</p>
			</div>
		</div>
		<div style="padding:1rem 0 1rem 4.3333rem;">
			{{$value.content}}
		</div>
		{{if $value.replys}}
		<div style="padding:0rem 0rem 1rem 4.3333rem;">
			<div style="background: #f3f5f7;padding: 0.5rem 0.5rem;">
				<span style="float:left;color: #5bae6b;">作者回复：</span> {{each $value.replys}}
				<div>{{$value.content}}</div>
				{{/each}}
			</div>
		</div>
		{{/if}}
	</div>
	{{/each}} {{/if}}
</script>
<script type="text/javascript">
	var type = GetQueryString('type')
	var productid = GetQueryString('productid');
	var toast = new auiToast();
	var timeago = new timeago();
	var userInfo = JSON.parse(sessionStorage.getItem('weixinData')).data.userInfo;
	var totalPage = 1;
	template.defaults.imports.time = function(value) {
		return timeago.format(value, 'zh_CN');
	};
	template.defaults.imports.timeFormat=function(str){  
	    var date=str.split(' ')[0];
		var dateStr=date.split('-')[1]+'-'+date.split('-')[2];
		var time=str.split(' ')[1]
		var timeStr=time.split(':')[0]+':'+time.split(':')[1];
		return dateStr+' '+timeStr
	}  
	$(function() {
		var getCommentList = function() {
			var url = hostUrl + "product/comment/list?productId=" + productid + "&userid=" + userId + "&rows=100&page=1&recommend=0";
			console.log(url);
			$.ajax({
				type: "get",
				url: url,
				async: true,
				success: function(data) {
					if (data.status != 0) {
						return;
					}
					var html = template("command_tem", data);
					document.getElementById('content').innerHTML = html;
				}
			});
		}
		getToken(getCommentList);

		$("body").on('click', ".praise-parent", function() {
			var _this = $(this).find('.praise')
			if(userId == 0) {
				$("#warn").show();
				setTimeout(function() {
					$("#warn").hide();
				}, 2000)
			} else {
				if(_this.attr("data-isfavor") == "false") {
					_this.attr("src", "icon/button_praise_pressed.png30.png");
					_this.attr("data-isfavor", "true");
					var s = _this.siblings('.count').html() - 0;
					_this.siblings('.count').html(s + 1);
					var url = hostUrl + "product/comment/like?id=" + _this.attr('timeDot') + "&userid=" + userId;
					$.ajax({
						type: "get",
						url: url,
						async: true,
						success: function(data) {

						}
					});

				} else {
					weekTip("您已点过赞");
				}
			}
		})

		//评论点击
		$('body').on('click', '.comment-mask', function() {
			$(this).fadeOut(300)
			$('.comment-container').css({
				'transform': 'translateY(200px)',
				'-webkit-transform': 'translateY(200px)',
			})
		})

		$('body').on('click', '#write', function() {
			$('.comment-container textarea').focus();
			$('.comment-mask').fadeIn(300)
			$('.comment-container').css({
				'transform': 'translateY(0)',
				'-webkit-transform': 'translateY(0)',
			})
		})
		//$('body #write').click();
		$('#commentInput').focus();
		$('body').on('click', '.close-modal', function() {
			$('.comment-mask').fadeOut(300)
			$('.comment-container').css({
				'transform': 'translateY(200px)',
				'-webkit-transform': 'translateY(200px)',
			})
		})
		$('body').on('click', '.submit-text', function() {
			var value = $('#commentInput').val(); //html().replace(/(<\/div>)/g,'').split('<div>').join('<br/>')
			if(!$('#commentInput').val()) {
				weekTip("请输入评论内容");
				return;
			}
			//			$('.comment-mask').fadeOut(300)
			//			$('.comment-container').css({
			//				'transform': 'translateY(200px)',
			//				'-webkit-transform': 'translateY(200px)',
			//			})
			toast.loading({
				title: "加载中",
				duration: 2000
			});
			var url = hostUrl + "product/comment/add?productId=" + productid + "&content=" + value + '&userid=' + userId + "&type=" + type;
			$.ajax({
				type: "get",
				url: url,
				async: true,
				success: function(data) {
					$('#commentInput').val('')
					getCommentList();
					toast.hide();
				}
			});
		})
	})
</script>